<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import PopupBox from "@/components/PopupBox.vue"; // 导入 Toast
import requestUtil from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {encrypt, decrypt} from "@/utils/jsencrypt.js";
import qs from "qs";
import Cookies from "js-cookie";
// 获取 userInfo

let router = useRouter();
let email = ref("");
let username = ref("");
let password = ref("");
let message = ref("");
let show = ref(false);
const onSubmit = async () => {
  // 如果用户名或密码为空，弹出提示框
  if (username.value === "" || password.value === "") {
    // Toast.fail('用户名和密码不能为空');
    return;
  }
  let userInfo = ref({
    username: username.value,
    password: password.value,
    encryptPassword:encrypt(password.value)
  });
  // 从 userInfo 中取出第一个用户对象
  let res = await requestUtil.post("/app/login/", {userInfo: userInfo.value});

  // 检查用户输入的用户名和密码是否正确
  if (res.data.code === 200) {
    // 如果验证成功，跳转到 HomeView 页面
    Cookies.set("access_token", res.data.access_token, { expires: 30 });
    Cookies.set("refresh_token", res.data.refresh_token, { expires: 30 });
    // 将加密后的密码保存到 cookie，有效期30天
    Cookies.set("password", encrypt(res.data.userInfo.password), { expires: 30 });
    Cookies.set("userId", res.data.userInfo.id, { expires: 30 });
    ElMessage.success('登录成功');
    router.push("/home");
    message.value = res.data.info;
    show.value = true;
  } else {
    // 如果用户名和密码错误，弹出提示框
    ElMessage.error('用户名或密码错误');
  }
};
// const close = async data => {
//   show.value = data;
//   if (message.value == "登录成功")
//     // let res1 = await requestUtil.get("/app/show/")
//     router.push("/home");
//   else {
//     return;
//   }
// };
</script>


<template>
  <div class="login">
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <PopupBox :message="message" v-show="show" @close="close"></PopupBox>
      </div>
    </van-overlay>
    <div class="content">
      <h1>登录</h1>
      <p>请输入您的邮箱登录</p>
      <van-form class="box1">
        <van-cell-group inset>
          <!-- <van-field
            v-model="email"
            name="邮箱"
            label="邮箱"
            placeholder="邮箱"
            :rules="[ { required: true, message: '请填写邮箱' }, { pattern:  /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+$/, message: '邮箱格式不正确'} ]"
          /> -->
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[ { required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[ { required: true, message: '请填写密码' }, { pattern: /^.{6,}$/, message: '密码长度不能小于6位' } ]"
          />
        </van-cell-group>

        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" @click="onSubmit">立即登录</van-button>
        </div>
      </van-form>

      <div class="foot">
        <router-link to="/register">
          <span>还没有账号？</span>
          <button>去注册</button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login {
  background-image: url("/img/登录/login1.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
}

.login .content {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  border-top-right-radius: 50px;
  width: 100%;
  height: 100vh;
  padding: 30px;
  box-sizing: border-box;
}

.login .content h1,
.content p {
  text-align: center;
  padding: 10px;
  margin-left: 30px;
}

.login .content p {
  font-weight: 400;
  font-size: 30px;
  color: #b2bac6;
}

.login .box1 {
  margin-top: 50px;
}

.forgot-password {
  text-align: right;
  margin-right: 30px;
}

.forgot-password button {
  color: #8e8e8e;
  font-size: 24px;
  border: none;
  background-color: #ffffff;
}

.login .foot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 150px;
  margin-bottom: 20px;
}

.foot span {
  margin-right: 8px;
  font-size: 24px;
  color: #666;
}

.foot button {
  color: #0065ff;
  font-size: 28px;
  border: none;
  background-color: #ffffff;
}

.foot a:hover {
  text-decoration: underline;
}
</style>
